<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>CSS Test: Basic functionality of the 'translate' method on a 3D transform</title>
        <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
        <link rel="help" href="http://www.w3.org/TR/css3-3d-transforms/#cssmatrix-interface" />
        <meta name="flags" content="dom" />
        <meta name="assert" content="The 'translate' method of the CSSMatrix interface is supported for 3D matrices" />
        <style type="text/css">
            #result
            {
                background: red;
                height: 100px;
                width: 100px;
            }
        </style>
        <script type="text/javascript">
            function startTest()
            {
                var testDiv = document.getElementById("result");
                cssMatrixConstructor = "new CSSMatrix()";

                var matrix = eval(cssMatrixConstructor);
                var resultMatrix = matrix.translate(100,200,300);
                var isOriginalMatrixUnchanged = false;
                var isResultMatrixCorrect = false;

                //Verify the original matrix is unchanged after the translate operation
                if ((1 == matrix.m11) &&
                (0 == matrix.m12) &&
                (0 == matrix.m13) &&
                (0 == matrix.m14) &&
                (0 == matrix.m21) &&
                (1 == matrix.m22) &&
                (0 == matrix.m23) &&
                (0 == matrix.m24) &&
                (0 == matrix.m31) &&
                (0 == matrix.m32) &&
                (1 == matrix.m33) &&
                (0 == matrix.m34) &&
                (0 == matrix.m41) &&
                (0 == matrix.m42) &&
                (0 == matrix.m43) &&
                (1 == matrix.m44))
                {
                    isOriginalMatrixUnchanged = true;
                }

                //Verify the resulting matrix is correct
                if ((1 == resultMatrix.m11) &&
                (0 == resultMatrix.m12) &&
                (0 == resultMatrix.m13) &&
                (0 == resultMatrix.m14) &&
                (0 == resultMatrix.m21) &&
                (1 == resultMatrix.m22) &&
                (0 == resultMatrix.m23) &&
                (0 == resultMatrix.m24) &&
                (0 == resultMatrix.m31) &&
                (0 == resultMatrix.m32) &&
                (1 == resultMatrix.m33) &&
                (0 == resultMatrix.m34) &&
                (100 == resultMatrix.m41) &&
                (200 == resultMatrix.m42) &&
                (300 == resultMatrix.m43) &&
                (1 == resultMatrix.m44))
                {
                    isResultMatrixCorrect = true;
                }

                if (isOriginalMatrixUnchanged && isResultMatrixCorrect)
                {
                    var testDiv = document.getElementById("result");
                    testDiv.style.background = "black";
                }
            }
        </script>
    </head>
    <body onload="startTest()">
        <p>Test passes if there is no red visible on the page.</p>
        <div id="result"></div>
    </body>
</html>
